function MakePage (total, cur, around) {
  this.total = total;
  this.cur = cur;
  this.around = around;
  this.baseCount = this.around * 2 + 1 + 2 + 2 + 2;
  this.surplus = this.baseCount - 4;
  this.startPosition = 1 + 2 + this.around + 1;
  this.endPosition = this.total - 2 - this.around - 1;
  this.createElement();
}
MakePage.prototype = {
  constructor: MakePage,
  render: function () {
    var result = [];
    if (this.total <= this.baseCount - 2) {
      result = Array.from({ length: this.total }, (v, k) => k + 1);
    } else {
      if (this.cur < this.startPosition) {
        result = [...Array.from({ length: this.surplus }, (v, k) => k + 1), '...', this.total];
      } else if (this.cur > this.endPosition) {
        result = [1, '...', ...Array.from({ length: this.surplus }, (v, k) => this.total - this.surplus + k + 1)];
      } else {
        result = [1, '...', ...Array.from({ length: this.around * 2 + 1 }, (v, k) => this.cur - this.around + k), '...', this.total];
      }
    }
    result.push('下一张');
    result.unshift('上一张');
    return result;
  },
  createElement: function () {
    var self = this;
    var _result = this.render();
    var _box = document.getElementById('box');
    var _iLeft = document.createElement('i');
    _iLeft.innerHTML = '上一页';
    _iLeft.className = 'i_left';
    _iLeft.onclick = function () {
      self.cur > 1 ? self.cur-- : false;
      if (self.cur === self.total) {
        _iRight.style.display = 'none';
      } else {
        _iRight.style.display = 'inline-block';
      }
      self._right();
    };
    _box.appendChild(_iLeft);
    for (var i = 1; i < this.render().length - 1; i++) {
      var _iCon = document.createElement('i');
      _result[i] === this.cur ? _iCon.className = 'i_new' : _iCon.className = 'i_content';
      _iCon.innerHTML = _result[i];
      _iCon.onclick = function () {
        if (this.innerHTML !== '...') {
          self.cur = +this.innerText;
          self._right();
        }
        if (self.cur === 1) {
          _iLeft.style.display = 'none';
        } else {
          _iLeft.style.display = 'inline-block';
        }
        if (self.cur === self.total) {
          _iRight.style.display = 'none';
        } else {
          _iRight.style.display = 'inline-block';
        }
      };
      _box.appendChild(_iCon);
    };
    var _iRight = document.createElement('i');
    _iRight.innerHTML = '下一页';
    _iRight.className = 'i_left';
    _iRight.onclick = function () {
      self.cur < self.total ? self.cur++ : false;
      if (self.cur === 1) {
        _iLeft.style.display = 'none';
      } else {
        _iLeft.style.display = 'inline-block';
      }
      self._right();
    };
    _box.appendChild(_iRight);
  },
  _right: function () {
    var _this = this;
    var parents = document.getElementById('box').childNodes;
    var Arr = [].slice.call(parents, (1));
    var arr = Arr.slice(1, -1);
    var resArr = this.render().slice(1, -1);
    arr.forEach(function (value, index) {
      value.innerHTML = resArr[index];
      _this.cur === resArr[index] ? value.className = 'i_new' : value.className = 'i_content';
    });
  }
};
/* eslint-disable no-new */
new MakePage(100, 19, 2);
